<template>
  <div class="home">
    <div class="wrap">
      <div class="title">数据概况</div>
      <div class="boxlist">
        <div class="box">
          <div class="name">总注册用户数（人）</div>
          <div class="num">{{ info.regTotalCount }}</div>
        </div>
        <div class="box">
          <div class="name">今日新增注册用户（人）</div>
          <div class="num">{{ info.regTodayCount }}</div>
        </div>
        <div class="box">
          <div class="name">文章总量（篇）</div>
          <div class="num">{{ info.informationTotalCount }}</div>
        </div>
        <div class="box">
          <div class="name">今日文章发表数（篇）</div>
          <div class="num">{{ info.informationTodayCount }}</div>
        </div>
      </div>
    </div>
    <div class="wrap">
      <el-date-picker v-model="monthValue" type="month" value-format="yyyy-MM" placeholder="选择月" @change="setlectMonth()">
      </el-date-picker>
      <div class="echartsBox">
        <div id="J_chartLineBox" class="chart-box"></div>
      </div>
    </div>
    <!-- <div class="wrap">
      <div class="title">
        常用功能
        <div class="set" @click="dialogVisible = true">设置</div>
      </div>
      <div class="listwrap">
        <div
          class="list"
          v-for="(item, index) in functionsList"
          :key="index"
          v-show="item.check"
          @click="goMenu(item.menuId)"
        >
          <img class="icon" :src="urlicon" alt="" />
          <div class="name">{{ item.menuName }}</div>
        </div>
      </div>
    </div> -->
    <!-- <el-dialog title="常用功能" :visible.sync="dialogVisible" width="60%">
      <el-checkbox-group v-model="menuIdList">
        <el-checkbox
          v-for="(item,index) in functionsList"
          :label="item.menuId"
          :key="index"
          >{{ item.menuName }}</el-checkbox
        >
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cmtSet()">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      dialogVisible: false,
      chartLine: null,
      info: {},
      urlicon: require('../../assets/img/adminIcon.png'),
      menuIdList: [],
      monthValue: '',
      functionsList: [],
      statisticsObj: {}
    }
  },
  created () {
    var date = new Date()
    var Year = date.getFullYear() // 获取完整的年份(4位)
    var Month = date.getMonth() // 获取当前月份(0-11,0代表1月)
    this.monthValue = Year + '-' + this.statusFun(Month + 1)
  },
  mounted () {
    this.getDataOverview()
    this.getMonthStatisticsList()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
  },
  computed: {
    statusFun (e) {
      return (e) => {
        switch (e) {
          case 1:
            return '01'
          case 2:
            return '02'
          case 3:
            return '03'
          case 4:
            return '04'
          case 5:
            return '05'
          case 6:
            return '06'
          case 7:
            return '07'
          case 8:
            return '08'
          case 9:
            return '09'
          case 10:
            return '10'
          case 11:
            return '11'
          case 12:
            return '12'
        }
      }
    }
  },
  methods: {
    goMenu (e) {
      if (e == 1) {
        this.$router.push({ name: 'm-memberList' })
      } else if (e == 2) {
        this.$router.push({ name: 'o-orderList' })
      } else if (e == 3) {
        this.$router.push({ name: 'i-informationList' })
      } else if (e == 4) {
        this.$router.push({ name: 's-supplyDemanded' })
      } else if (e == 5) {
        this.$router.push({ name: 'a-adList' })
      } else if (e == 6) {
        this.$router.push({ name: 'u-staff' })
      }
    },
    setlectMonth () {
      this.getMonthStatisticsList()
    },
    getDataOverview () {
      this.$http({
        url: this.$http.adornUrl(`/admin/home/statistics`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.info = data.data
        }
      })
    },
    cmtSet () {
      this.$http({
        url: this.$http.adornUrl(`/admin/data/addCommonFunctions`),
        method: 'POST',
        data: this.$http.adornData({ menuIdList: this.menuIdList })
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.dialogVisible = false
        }
      })
    },
    getMonthStatisticsList () {
      var Year = this.monthValue.slice(0, 4)
      // console.log(this.monthValue)
      var Month = this.monthValue.slice(-2)
      this.$http({
        url: this.$http.adornUrl(`/admin/home/register/user/trend?month=${Year}-${Month}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === '200') {
          let obj = {
            'date': [],
            'regCount': []
          }
          //
          var list = data.list
          list.forEach((item, index) => {
            obj.date.push(item.date)
            obj.regCount.push(item.regCount)
          })
          this.statisticsObj = obj
          this.initChartLine()
        }
      })
    },
    // 折线图
    initChartLine () {
      var option = {
        title: {
          // 'text': '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['注册用户数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.statisticsObj.date
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '	注册用户数（人）',
            type: 'line',
            stack: '注册用户数',
            data: this.statisticsObj.regCount
          }
        ]
      }
      this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-checkbox {
  margin-left: 30px;
}

.chart-box {
  min-height: 400px;
}

.home {
  .wrap {
    padding: 20px 20px;
    background-color: #f7f7f7;
    border-radius: 10px;
    margin-top: 20px;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;

    .set {
      font-weight: 300;
      font-size: 14px;
      cursor: pointer;
    }

    .set:hover {
      color: #05A844;
    }
  }

  .boxlist {
    display: flex;
    margin-top: 20px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    .box {
      .name {
        font-size: 14px;
      }

      .num {
        color: #05A844;
        font-size: 22px;
        text-align: center;
        font-weight: bold;
        margin-top: 10px;
      }

      .dev {
        text-align: center;
        margin-top: 10px;
      }
    }
  }

  .echartsBox {}

  .listwrap {
    display: flex;
    margin-top: 30px;
    flex-wrap: wrap;

    .list {
      min-width: 200px;
      margin-bottom: 20px;
      margin-right: 10px;
      text-align: center;
      display: flex;
      align-items: center;
      cursor: pointer;

      .icon {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }

      .name {
        text-align: center;
      }
    }

    .list:hover {
      .name {
        color: #05A844;
      }
    }
  }
}</style>

